<template>
	<div class="bg-border" :style="{width: width+'px', height: height+'px'}">
		<slot></slot>
		<span class="border-horn1"></span>
		<span class="border-horn2"></span>
		<span class="border-horn3"></span>
		<span class="border-horn4"></span>
	</div>
</template>

<script>
	export default{
		name: "BgBorder",
		props: {
			width: {
				type: Number,
				default: 1230
			},
			height: {
				type: Number,
				default: 618
			}
		}
	}
</script>

<style lang="scss" scoped>
	.bg-border{
		position: relative;
		box-sizing: border-box;
		background-color: rgba(#0b296c, .3);
		border-radius: 20px;
		border: 4px solid #0a609f;
		span{
			position: absolute;
			width: 57px;
			height: 57px;
			&.border-horn1{
				top: -20px;
				left: -20px;
				background: url(~@/assets/img/con-bg-lt-top.png) no-repeat;
				background-size: 100% auto;
			}
			&.border-horn2{
				top: -20px;
				right: -20px;
				background: url(~@/assets/img/con-bg-rt-top.png) no-repeat;
				background-size: 100% auto;
			}
			&.border-horn3{
				bottom: -20px;
				left: -20px;
				background: url(~@/assets/img/con-bg-lt-bot.png) no-repeat;
				background-size: 100% auto;
			}
			&.border-horn4{
				bottom: -20px;
				right: -20px;
				background: url(~@/assets/img/con-bg-rt-bot.png) no-repeat;
				background-size: 100% auto;
			}
		}
	}
</style>
